<template>
  <el-container id="rootBox" ref="rootBox">
    <el-header>
      <el-form  ref="form" :inline="true"  @submit.native.prevent >
        <el-form-item label="表名前缀过滤(小写)" >
           <el-input ref='key' v-model="tablePrefix" autofocus="true" placeholder="回车搜索" @keyup.enter.native="build(true,'html')" ></el-input>
        </el-form-item>
        <el-form-item >
        <!--  <el-button type="primary" @click="build(true,'html')">查询</el-button>-->
          <el-button type="primary" @click="build(false,'doc')">下载word</el-button>
          <el-button type="primary" @click="build(false,'html')">下载html</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main style="    padding-top: 0px;">
      <el-container>
        <el-header style="height: 25px;  text-align: left;  background: none;    ">
          <el-input ref='keyPage' v-model="keyPage" autofocus="true" placeholder="搜索导航" style="width:300px;width: 200px;margin-left: 50px;" clearable></el-input>
        </el-header>
        <el-main>
          <el-tabs v-model="navValue"   tab-position="left" id="tabs">
            <el-tab-pane
              :key="item.name"
              v-for="(item, index) in searchPage"
              :label="item.title"
              :name="item.name"
              v-html="item.content"
              :data="searchPage"
            >
              {{item.content}}
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
let $ = require('jquery')

export default {
  name: 'rootBox',
  data() {
    return {
      tablePrefix: '',
      boxLeft: '',
      boxMain: '',
      navValue: 'all',
      keyPage: '',
      navTabs: [
        {
          name: 'all',
          title: '全部',
          content: '11'
        }
      ]

    }
  },
  methods: {
    build(isPreview, type) {
      this.utilVue.loadShow(true)
      /* eslint-disable */

      this.$ajax.post('tool/tableStructureBuild', {buildType: type,isPreview: isPreview,tablePrefix: this.tablePrefix}).then((response) => {
        if(isPreview){
          //左边只保留导航
          let dombox=$(response.data);
          this.navTabs=[
            {
              name: 'all',
              title: '全部',
              content:''
            }
          ];
          let countAll='';
          dombox.find('table:eq(0) tr').each((index,elehtml)=> {
            if(index ==0 ) return true;
            var ele=$(elehtml);
            let tableName=ele.find('td:eq(1)').text();
            let tableRemark=ele.find('td:eq(2)').text();
            if(!tableRemark) tableRemark='未设置表备注'

            let content='';
            content+=' <div style="margin-top:30px;font-weight: bold;">表名:'+tableName+'  </div> ';
            content+=dombox.find('table:eq('+index+')').prev('div').prev('div').prop('outerHTML');
            content+=dombox.find('table:eq('+index+')').prop('outerHTML');
            countAll+=content;
            this.navTabs.push({
              name: tableName,
              title: tableName+'('+tableRemark+')',
              content: content
            })
          })
          this.navTabs[0].content=countAll;
          this.navValue='all';
        }else{
          let dataSrc=process.env.VUE_APP_BASE_API+'res'+response.data;
          if(type == 'doc'){
            window.location.href=dataSrc;
          }else{
            window.open(dataSrc, "_blank");
          }


        }
        this.utilVue.loadHide()
      })
    }
  },
  mounted() {
    this.build(true,'html')
    /* eslint-disable */
    $("#tabs .el-tabs__nav,#tabs .el-tabs__content").css({'max-height': `${document.documentElement.clientHeight-220}px` ,'overflow': 'auto'})
    $("#tabs #pane-all table:eq(0)").hide();
    this.$refs.keyPage.focus();
  },
  comments: {
  },
  computed:{
    searchPage: function() {
      if (this.keyPage) {
        return this.navTabs.filter(ob => {
          if (ob.title.includes(this.keyPage) || ob.title.toLowerCase().indexOf(this.keyPage.toLowerCase()) != -1 ) {
            return ob;
          }
        });
      }
      return this.navTabs;
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-tabs__nav,.el-tabs__content {
    max-height: 400px ;
    overflow: auto ;
  }


  #boxLeft table:nth-child(1){
    background-color: green !important;
  }
  #pane-all h2{
    display: none !important;
  }

  div[role="tablist"]{
    width: 300px;
  }
  .el-tabs__item{
   text-align: left !important;
  }

  body, td {
    font-family: verdana, fantasy;
    font-size: 12px;
    line-height: 150%
  }

  table {
    width: 100%;
    background-color: #ccc;
    margin: 5px 0
  }

  td {
    background-color: #fff;
    padding: 3px 3px 3px 10px
  }

  thead td {
    text-align: center;
    font-weight: bold;
    background-color: #eee
  }

  a:link, a:visited, a:active {
    color: #015fb6;
    text-decoration: none
  }

  a:hover {
    color: #e33e06
  }

  .el-main{
  padding-left: 0px;
}
</style>
